<template>
  <div class="profile-page">
    <!-- 头部 -->
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 信息1组 -->
    <van-cell-group>
      <van-cell title="头像" is-link @click="imgShow = true">
        <van-image
        slot="default"
        fit="cover"
        round
        :src="userList.photo"/>
      </van-cell>

      <van-cell @click="showPopup" title="昵称" :value="userList.name" is-link/>
      <van-cell title="简介" :value="zanwu" is-link/>
    </van-cell-group>

    <!-- 信息2组 -->
    <van-cell-group style="margin-top:12px">
      <van-cell @click="sexShow = true" title="性别" :value="userList.gender === 0? '男' : '女'" is-link/>
      <van-cell  @click="timeShow = true" title="生日" :value="userList.birthday" is-link/>
    </van-cell-group>
    <!-- 底部退出登录 -->
    <div class="logout">
      <span  @click="logout">退出登录</span>
    </div>

    <!-- 昵称编辑弹出 -->
    <van-popup
      v-model="nameShow"
      position="right"
      :style="{ height: '100%', width: '100%' }">
        <van-nav-bar
          title="编辑昵称"
          left-text="返回"
          right-text="提交"
          left-arrow
          @click-left="nameShow = false"
          @click-right="onClickRight"
        />
      <!-- 昵称编辑 -->
      <div class="van-field">
        <van-cell-group>
          <van-field v-model="userList.name" />
        </van-cell-group>
      </div>
    </van-popup>

    <!-- 编辑性别 -->
    <van-action-sheet v-model="sexShow" :actions="actionsSex" @select="onSelectSex"  cancel-text="取消" close-on-click-action/>
    <!-- 头像编辑 -->
    <van-action-sheet v-model="imgShow" :actions="actionsImg" @select="onSelectSex"  cancel-text="取消" close-on-click-action/>

    <!-- 生日日期弹出 -->
    <van-popup v-model="timeShow" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getUserProfile } from '@/api/user'
import { delToken } from '@/utils/storage'
export default {
  name: 'profilePage',
  data () {
    return {
      zanwu: '暂无',
      userList: [],
      imgShow: false,
      nameShow: false,
      sexShow: false,
      timeShow: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      actionsImg: [{ name: '拍照' }, { name: '本地选择' }],
      actionsSex: [{ name: '男' }, { name: '女' }]
    }
  },
  methods: {
    // 头像编辑
    onSelectImg (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.imgShow = false
      Toast(item.name)
    },
    onClickRight () {

    },
    onSelectSex () {

    },
    // 昵称编辑
    showPopup () {
      this.nameShow = true
    },

    // 退出登录
    logout () {
      delToken()
      this.$router.push('/login')
      this.$toast.success('登出成功')
    }

  },
  // 获取用户个人资料
  async created () {
    const res = await getUserProfile()
    this.userList = res.data
    console.log(this.userList)
  }
}
</script>

<style lang="less" scoped>
.profile-page {
  background: #f8f8f8;
  .van-image {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
  }
  .van-cell__title {
    width: 50px;
    flex: none;
  }
  .van-field{
    margin: 10px 0;
    .van-cell-group{

       border-radius: 4px;
    }
  }
}
.logout {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  color: #fb7299;
}

</style>
